/** * 此组件获取的字典项是缓存的，无论多少个节点同时渲染，都会等第一个组件渲染完成成功之后再渲染其他的 */
<script lang="ts" setup>
import { Dictionary } from "@/api/system-api/dictionary/types/dictionary"
import { onMounted, ref } from "vue"
import { useDictionaryStoreHook } from "@/store/modules/dictionary"
const store = useDictionaryStoreHook()
const prop = defineProps({
  /**
   * 当前字典节点value
   */
  currentValue: {
    type: String,
    require: true,
    default: ""
  },
  /**
   * 节点父级id 根据此id获取下拉选项
   */
  parentId: {
    type: Number,
    required: true
  }
})
const dic = ref<Dictionary>()
onMounted(async () => {
  const list = await store.getDicList(prop.parentId)
  console.log(list)
  dic.value = list.find((t) => t.value === prop.currentValue)
})
</script>
<template>
  <el-text v-if="dic?.displayType === 'text'" :type="dic.tagType">{{ dic.name }}</el-text>
  <el-tag v-else :type="dic?.tagType" :effect="dic?.tagTheme" size="small">{{ dic?.name }}</el-tag>
</template>
